<template>
	<view class="page-box">
		<scroll-view scroll-y="true" class="scroll">
			<view v-for="(item,index) in goodlist" :key="index">
				<view class="image-box">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="center-box">
					<view class="price1">心动价：<text style="font-size:40rpx;">￥{{item.price}}</text></view>
					<view class="price1" style="font-size:26rpx;">市场价：<text style="font-size: 26rpx;">￥{{item.bprice}}</text></view>
				</view>
				<view class="detail-box">
					<view class="one-box">
						<view class="bp">{{item.bp}}</view>
						<view>月销：{{item.num}}</view>
					</view>
					<view class="good-title">{{item.title}}</view>
					<view class="icon-box">
						<button class="icon" @click="collect">
							<image :src="fav == 0?'../../static/image/fav1.png':'../../static/image/fav2.png'"></image>
							<text>收藏</text>
						</button>
						<button class="icon" open-type="contact">
							<image src="../../static/image/kefu.png"></image>
							<text>客服</text>
						</button>
						<button class="icon" open-type="share">
							<image src="../../static/image/share.png"></image>
							<text>分享</text>
						</button>
					</view>
				</view>
				<view class="detail-box">
					<view class="addr">发货地：{{item.addr}}</view>
					<view class="detail">商品详情</view>
					<view class="detail-text">{{item.detail}}</view>
					<view class="recommon" @click="GoComment">
						<text>宝贝评价</text>
						<image src="../../static/image/youjiantou.png"></image>
					</view>
				</view>
				</view>
		</scroll-view>
			<view class="bottom-box">
				<view class="btn" @click="GoCart()">加入购物车</view>
				<view class="btn" @click="GoBuy()">立即购买</view>
			</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				goodlist:'',
				id:'',
				fav:0,
			}
		},
		onLoad(e) {
			uni.showLoading({
				title:'加载中'
			})
			console.log('页面接受',e)
			uniCloud.callFunction({
				name:'goodDetail',
				data:{
					_id:e.id
				},
				success: (rest) => {
					console.log('详情获取成功',rest.result.data)
					this.goodlist = rest.result.data
					this.id = rest.result.data[0]._id
					uni.hideLoading()
				},
				fail: (err) => {
					uni.hideLoading()
					console.log('页面详情出错',err)
				}
			})
		},
		// 转发好友
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		    }
		    return {
		      title: '商品详情',
		      path: '/pages/goods/goods-detail'
		    }
		  },
		methods: {
			// 查看评论
			GoComment(){
				uni.navigateTo({
					url:'/pages/goods/comment'
				})
				},	
			collect(){
				let that = this
				console.log(this.id)
				uniCloud.callFunction({
					name:'addCollect',
					data:{
						title:that.goodlist[0].title,
						image:that.goodlist[0].image,
						bp:that.goodlist[0].bp,
						price:that.goodlist[0].price,
						num:that.goodlist[0].num,
						goods_id:that.id
					},
					success: (rest) => {
						console.log('收藏成功')
						this.fav = 1
						uni.showToast({
						    title: '收藏成功',
						    duration: 2000
						});
					},
					fail: (err) => {
						console.log('收藏失败',err)
					}
				})
				this.fav = 1
				},	
			// 加入购物车		
			GoCart(){
				let that = this
				console.log(this.id)
				uniCloud.callFunction({
					name:'addCart',
					data:{
						title:that.goodlist[0].title,
						image:that.goodlist[0].image,
						bp:that.goodlist[0].bp,
						price:that.goodlist[0].price,
						num:that.goodlist[0].num,
						goods_id:that.id
					},
					success: (rest) => {
						console.log('加入购物车成功')
						uni.showToast({
						    title: '加入购物车成功',
						    duration: 2000,
							icon:'none'
						});
					},
					fail: (err) => {
						console.log('加入购物车失败',err)
					}
				})
			},
			GoBuy(){
				let that = this
				let value = {
					title:that.goodlist[0].title,
					image:that.goodlist[0].image,
					price:that.goodlist[0].price,
					num:that.goodlist[0].num,
					_id:that.goodlist[0]._id
				};
				that.$store.commit('getDetail', value);
				uni.navigateTo({
					url:'/pages/order/confirm-order'
				})
				}
		}
	}
</script>

<style scoped lang="scss">
	.image-box{
		width: 100%;
		height: 480rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.scroll{
		width: 100%;
		height: 91vh;
		}
	.center-box{
		background-color: #ff6633;
		display: flex;
		flex-direction:row;
		align-items: center;
		padding: 24rpx;
	}
	.price1{
		font-size:28rpx;
		font-weight: 600;
		line-height: 54rpx;
		color: #FFFFFF;
		opacity: 1;
		margin-left: 20rpx;
		}
	.detail-box{
		margin-bottom: 20rpx;
		padding:24rpx 30rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		}
	.one-box{
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: #979797;
		opacity: 1;
		margin-bottom: 20rpx;
		}
	.bp{
		width:140rpx;
		padding: 10rpx 0rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: #FFFFFF;
		border-radius: 20rpx;
		background-color: #ff6633;
		}
	.good-title{
		font-size: 30rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
		margin-bottom: 20rpx;
		}
	.icon-box{
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		}
	.icon{
		display: flex;
		flex-direction:row;
		align-items: center;
		image{
			width: 36rpx;
			height: 36rpx;
			}
		text{
			margin-left: 8rpx;
			font-size:28rpx;
			font-weight: 600;
			line-height: 54rpx;
			color: #979797;
			opacity: 1;
			}
		}
	button{
		background-color: #FFFFFF;
		border: none;
		}
	button::after {
	    border:none;
	}
	.addr{
		font-size: 28rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: #979797;
		opacity: 1;
		margin-bottom: 20rpx;
		}
	.detail{
		font-size: 28rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		margin-bottom: 20rpx;
		}
	.detail-text{
		font-size: 28rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: #979797;
		opacity: 1;
		margin-bottom: 20rpx;
		}
	.recommon{
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: space-between;
		image{
			width:18rpx;
			height:20rpx;
		};
		text{
			font-size: 28rpx;
			font-weight: 600;
			line-height: 32rpx;
			color: #333333;
			opacity: 1;
		}
	}
	.bottom-box{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content:space-around;	
		padding: 30rpx 0rpx;
		}
	.btn{
		background: #ff6633;
		opacity: 1;
		border-radius:40rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		width:45%;
		padding:15rpx 0rpx;
		text-align: center;
		line-height: 40rpx;
		}
	
</style>
